<template>
  <section class="workshop-title-wrapper" :style="{ 'background-image': `url(${background})` }">
    <span class="title">{{ title }}</span>
    <figure class="back" v-if="isAmplify" @click="handleAmplify"></figure>
    <slot v-else name="content"></slot>
  </section>
</template>

<script setup>
import { shallowRef } from 'vue'
import img from '@/assets/images/label.png'
const props = defineProps({
  title: {
    type: String
  },
  background: {
    type: String,
    default: () => img
  },
  isAmplify: {
    type: Boolean,
    default: () => true
  }
})

const amplify = shallowRef(false)
function handleAmplify () {
  amplify.value = !amplify.value
  emit('amplify', amplify.value, props.title)
}
const emit = defineEmits(['amplify'])
</script>

<style lang="less">
.workshop-title-wrapper {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 90px;
  display: flex;
  justify-content: space-between;
  > .title {
    font-family: YouSheBiaoTiHei;
    font-size: 20px;
    text-shadow: 1px 1px 2px #122e67;
    display: inline-block;
    padding-left: 32px;
    line-height: 55px;
  }
  > .back {
    background: url('@/assets/images/btn-amplify.png') no-repeat;
    background-size: 100% 100%;
    width: 24px;
    height: 24px;
    margin-top: 16px;
    margin-right: 8px;
    margin-bottom: 0;
    margin-left: 0;
    cursor: pointer;
    &:hover {
      transform: scale(1.2);
      transition: transform 0.3s;
    }
  }
}
</style>
